<template>
    <div class="productProNew">
        <div class="title">
            <h1>
                <span>位置查看</span>
                <ul class="fr selectList">
                    <li>
                        <label :for="'name'+$attrs.text">姓名：</label>
                        <input type="text" :id="'name'+$attrs.text" v-model="name">
                    </li>
                    <li>
                        <label :for="'phone'+$attrs.text">手机号：</label>
                        <input type="text" maxlength="11" :id="'phone'+$attrs.text" v-model="phone">
                    </li>
                    <li>
                        <button class="searchBtn" type="button" @click="inquire()">查询</button>
                    </li>
                </ul>
            </h1>

        </div>
        <div>
            <div :id="'allmap'+$attrs.text" class="allmap"></div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                Http:'',
                mapIcon1:'static/images/Map-icon.png',
                mapIcon2:'static/images/Map-icon2.png',
                positionList:'',
                bm:'',
                phone:'',
                name:'',
                cut:0,
            }
        },
        computed:{
            XchBaseGetPosition(){
                return this.$store.state.interface.ptXchBaseGetPosition;
            },
        },

        methods:{
            inquire(){
                let self = this;
                if(self.name=='' & self.phone==''){
                    layer.msg('请输入要查找的名字或者电话!');
                }else {
                    let without=0;
                    if(self.name!=''){
                        for (let i in self.positionList) {
                            if(self.positionList[i].name==self.name){
                                self.bm.centerAndZoom(new BMap.Point(self.positionList[i].longitude,self.positionList[i].latitude),14);
                                without=1;
                            }
                        }
                    }
                    if(self.phone!=''){
                        for (let i in self.positionList) {
                            if(self.positionList[i].mobile==self.phone){
                                self.bm.centerAndZoom(new BMap.Point(self.positionList[i].longitude,self.positionList[i].latitude),14);
                                without=1;
                            }
                        }
                    }
                    if(without==0){
                        layer.msg('没查找到你需要查找的人员!');
                    }
                }
            },
            mapIncident(data){
                let self = this;
                //地图初始化
                self.bm = new BMap.Map("allmap"+self.$attrs.text);
                if(self.positionList==''){
                    self.bm.centerAndZoom(new BMap.Point(116.32715863448607,39.990912172420714), 14);

                }else{
                    self.bm.centerAndZoom(new BMap.Point(self.positionList[0].longitude,self.positionList[0].latitude), 14);
                }

                self.bm.addControl(new BMap.NavigationControl());
                // 图标
                let myIcon = new BMap.Icon(self.mapIcon1, new BMap.Size(24,24)); //导游的图标
                let myIcon2 = new BMap.Icon(self.mapIcon2, new BMap.Size(24,24));
                //
                for (let i in self.positionList) {
                    let ggPoint = new BMap.Point(self.positionList[i].longitude,self.positionList[i].latitude);
                    if(self.positionList[i].shenfen=='导游'){
                        let markergg = new BMap.Marker(ggPoint,{icon:myIcon});
                    }else{
                        let markergg = new BMap.Marker(ggPoint,{icon:myIcon2});
                    }
                    self.bm.addOverlay(markergg); //添加marker
                    let labelgg = new BMap.Label("姓名："+self.positionList[i].name+"<br /> 手机："+self.positionList[i].mobile+"<br />经纬："+self.positionList[i].longitude+","+self.positionList[i].latitude,{offset:new BMap.Size(-25,-70)});
                    labelgg.setStyle({
                        color : "#333",
                        fontSize : "12px",
                        lineHeight : "20px",
                        fontFamily:"微软雅黑",
                        padding: '5px 10px',
                        borderColor: '#333',
                        display: "none"
                    });
                    markergg.setLabel(labelgg); //添加谷歌label
                    markergg.addEventListener("click", function(e) {
                        if(self.cut==0){
                            labelgg.setStyle({
                                display: "block"
                            });
                            self.cut=1;
                        }else{
                            labelgg.setStyle({
                                display: "none"
                            });
                            self.cut=0;
                        }

                    })
                }

            },
        },
        beforeMount(){
            let self = this;
            let sessionId = JSON.parse(sessionStorage.getItem('customer')).sid;
            self.Http = `${self.XchBaseGetPosition}?sid=${sessionId}`; //修改
            layer.load(2);
            let formData =new FormData(); // 基础信息表单数据
            formData.append('xid', self.$attrs.proid);
            formData.append('app', 'liexing');
            formData.append('platform', 'web');
            formData.append('ver', '3');
            self.$ajax.post(self.Http,formData).then(function(res){
                layer.closeAll('loading');
                let code = res.data.code;
                if(code === '10000'){
                    self.positionList=res.data.result.positionList;
                } else{
                    self.codes(code);
                    layer.msg('没有人员数据，请添加成员名单！');
                }
                self.mapIncident(); //百度地图
            },function(res){
                layer.closeAll('loading');
                layer.msg('服务器错误！');
            })

        },
        mounted(){

        },
        components:{}
    }
</script>
<style lang="scss" scoped>
    .selectList{
        border: 0;
        padding-right: 30px;
    }
    .allmap{
        height: 600px;
        width: 100%;
    }
    label.BMapLabel:before{
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-top: 50px solid black;
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
    }


</style>
<style>
    .BMap_Marker label.BMapLabel:before{
        position: absolute;
        content: '';
        width: 10px;
        height: 10px;
        left: 30px;
        bottom: -7px;
        background-color: #fff;
        border-bottom: 1px solid #333;
        border-right: 1px solid #333;
        transform: rotate(45deg);
        -ms-transform: rotate(45deg);		/* IE 9 */
        -webkit-transform: rotate(45deg);	/* Safari and Chrome */
        -o-transform: rotate(45deg);		/* Opera */
        -moz-transform: rotate(45deg);
    }
    .allmap img{
        max-width: initial;
        display: initial;
        border: initial;
        vertical-align: initial;
    }
</style>
